<template>
  <view class="price-table-wrapper">
    <view class="price-table">
      <view class="price-table-header">
        <view class="price-table-cell">茶叶品种</view>
        <view class="price-table-cell">等级</view>
        <view class="price-table-cell">毛茶收购价格</view>
        <view class="price-table-cell">单位</view>
      </view>
      <view v-if="list && list.length > 0">
        <view
          v-for="item in list"
          :key="item.id"
          class="price-table-row"
          :class="{ even: idx % 2 === 1, odd: idx % 2 === 0 }"
        >
          <view class="price-table-cell">{{ item.teaVarieties }}</view>
          <view class="price-table-cell">{{ item.teaGrade }}</view>
          <view class="price-table-cell">
            {{ item.maochaAcquisitionPrice }}
          </view>
          <view class="price-table-cell">{{ item.unit || '' }}</view>
        </view>
      </view>
      <view
        v-else
        class="empty-row"
      >
        暂无数据
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'PriceTable',
    props: {
      list: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

<style lang="scss" scoped>
  .price-table-wrapper {
    width: 100vw;
    height: 100vh;
    background: #fff;
  }
  .price-table {
    margin: 26rpx 32rpx;
  }
  .price-table-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecf3ff;
    font-weight: 600;
    font-size: 26rpx;
    color: #333;
    height: 90rpx;
    text-align: center;
  }
  .price-table-row {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 26rpx;
    color: #333;
    height: 90rpx;
    text-align: center;
  }
  .price-table-row.odd {
    background: #fff;
  }
  .price-table-row.even {
    background: #f5f7fb;
  }
  .price-table-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .empty-row {
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 26rpx;
  }
</style>
